<!--
 * @Description  : 官网分段节点信息
 * @Author       : zhao
 * @Date         : 2022-10-20 09:31:02
 * @LastEditors  : zhao
 * @LastEditTime : 2022-11-25 18:52:24
-->
<!--  -->
<template>
	<div class="piplineNodeInfo">
		<ztitle :name="lineData.name" />
		<div style="color: #409eff; padding: 10px">
			<!-- <span class="title"
				>分段编码：<span>{{ pl_section_code }}</span></span
			>
			<span class="title"
				>名称：<span>{{ pl_section_data.name }}</span></span
			>
			<span class="title"
				>压力等级：<span>{{ pl_base_data.pressure | setPressure }}</span></span
			>
			<span class="title"
				>建设年代：<span>{{ pl_base_data.cstDate }}</span></span
			>
			<span class="title"
				>所属管线名称：<span>{{ pl_base_data.name }}</span></span
			> -->
		</div>
		<div class="content">
			<el-row :gutter="0" style="height: 100%">
				<div class="menu">
					<el-col :span="5" :xs="10" :sm="10" :md="10" :lg="5" style="min-height: calc(100vh - 130px);padding-top: 15px;margin-left: 5px;box-shadow: -2px 0px 8px rgba(0, 0, 0, 0.2);border: 1px solid lightgray;text-align: center;padding-left: 10px;padding-right: 10px;">
				<el-col v-if="ent" :span="12" :lg="12">
					<!-- <el-cascader placeholder="区域选择" filterable v-model="zoneValue" :options="zoneOptions"  @change="handleZoneSelect">
					</el-cascader> -->

					<el-cascader
					v-if="isCity"
					:options="areaData"
					@change="handleCityChange"
					v-model="currentRegion"
					placeholder="区域选择"
					:props="cascProps"
					/>
					<el-select v-else v-model="currentRegion" placeholder="区域选择" @change="handleChange" >
                      <el-option
                        v-for="item in cityList"
                        :key="item.cityCode"
                        :label="item.name"
                        :value="item.cityCode">
                      </el-option>
                    </el-select>
					</el-col>
				<el-col v-if="ent"  :span="12" :lg="12">
					<el-select v-model="currentCompanyUuid" placeholder="所属企业" filterable @change="handleEntSelect">
    				<el-option v-for="item in companyList" :key="item.uuid" :label="item.name" :value="item.uuid">
					</el-option>
					</el-select>
				</el-col>
				<el-col :span="24" style="margin-top: 15px;">
					<el-tree :data="allBaseLine" @node-click="handleNodeClick"  :props="defaultProps"></el-tree>
				</el-col>
					</el-col>
				</div>
				<button v-if='currentLineUuid || ent' @click="showTable" style="z-index: 5000;position: absolute;right: 30px;top: 20px;">列表</button>
			<div class="information" v-if="(currentLineUuid || ent) && showTableBtn">
				<el-col	 :span="24" :xs="10" :sm="10" :md="10" :lg="24">
				<el-table  ref="productTable" :stripe="true" height="100%" :data="list" style="width: 430px;" @selection-change="handleSelectionChange" v-loading="loading" border>
					
					<!-- <el-table-column type="selection" width="60" align="center"></el-table-column> -->
					<el-table-column type="index" width="50" label="序号" align="center"> </el-table-column>
					<!-- <el-table-column label="所属分段编码" width="220" align="center">
						<template slot-scope="scope">{{ scope.row.plSectionCode }}</template>
					</el-table-column> -->
					<!-- <el-table-column label="节点编码" width="220" align="center">
						<template slot-scope="scope">{{ scope.row.code }}</template>
					</el-table-column> -->

					<el-table-column label="节点名称" width="120" align="center">
						<template slot-scope="scope">{{ scope.row.name }}</template>
					</el-table-column>
					<el-table-column label="节点类型" width="100" align="center">
						<template slot-scope="scope">{{ scope.row.type | setType(scope.row) }}</template>
					</el-table-column>
					<el-table-column label="位置描述" align="center" show-overflow-tooltip prop="address">
						<!-- <template slot-scope="scope">{{ scope.row.address }}</template> -->
					</el-table-column>

					<el-table-column label="操作" width="80" align="center" fixed="right">
						<template slot-scope="scope">
							<p class="handleP">
								<i class="el-icon-document cursor" @click="handleUpdate([scope.row])"></i>
								<!-- <i class="el-icon-delete cursor" @click="handleDelete([scope.row])"></i> -->
							</p>
						</template>
					</el-table-column>
					
				</el-table>
				<!-- 下面的是注释 -->
				<el-pagination
				
					style="padding: 2000px 10px 0px;"
					background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					layout="total, sizes,prev, pager, next,jumper"
					:page-size="listQuery.pageSize"
					:page-sizes="[5, 10, 15]"
					:current-page.sync="listQuery.pageIndex"
					:total="total"
				>
				</el-pagination>
			</el-col>
			</div>
			
			<div class="ditu">
				<el-col :span="18" :xs="14" :sm="14" :md="14" :lg="18" style="min-height: calc(100vh - 130px);float: right;margin-right: 20px;box-shadow: 2px 0px 8px rgba(0, 0, 0, 0.2);border: 1px solid lightgray;">
				<zmap
					ref="map"
					:style="{  width: '100%', height: '80vh', 'min-width': '300px','min-height': 'calc(100vh - 130px)' }"
					:pl_section_code="pl_section_code"
					:mapView="mapView"
					:mapId="'mapId2'"
					:currentCompanyUuid="currentCompanyUuid"
					:currentLineUuid="currentLineUuid"
					:userName="userName"
					:Pressure="Pressure"
					:list="list"
					:ent="ent"
					@openEdit="openEdit"
					@searchAddress="searchAddress"
				/>
			</el-col>
			</div>
			
		</el-row>
		</div>
		
		<!--  position: fixed; bottom: 10px; left: 50% -->
		<!-- <p style="text-align: center">
			<el-button plain size="medium" @click="handleUpdate(rowsData)">返回</el-button>
			<el-button type="primary" size="medium" @click="handlePreservation">保存</el-button>
		</p> -->
		<el-dialog title="编辑节点信息" :visible.sync="dialogVisible_edit" :modal="false" width="500px" :before-close="handleDialogClose">
			<el-form ref="form_edit" :model="editForm" label-width="140px" :rules="rules">
				<!-- <el-form-item label="所属分段编码" prop="plSectionCode">
					<el-input v-model="editForm.plSectionCode" size="medium" clearable></el-input>
				</el-form-item> -->
				<el-form-item label="节点编码">
					<el-input disabled v-model="editForm.code" size="medium" clearable></el-input>
				</el-form-item>
				<el-form-item label="节点外部编码">
					<el-input v-model="editForm.codeExtsys" size="medium" clearable></el-input>
				</el-form-item>
				<el-form-item label="节点名称" prop="name">
					<el-input v-model="editForm.name" size="medium" clearable></el-input>
				</el-form-item>
				<el-form-item label="节点类型" prop="type">
					<el-select v-model="editForm.type" placeholder="节点类型" size="medium" style="width: 100%" clearable>
						<el-option label="三通" :value="170100"></el-option>
						<el-option label="拐点" :value="170200"></el-option>
						<el-option label="末端" :value="170300"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="位置描述" prop="address">
					<el-input v-model="editForm.address" size="medium" clearable></el-input>
				</el-form-item>
				<el-form-item label="经度" prop="longitude">
					<el-input disabled v-model="editForm.longitude" size="medium" clearable></el-input>
				</el-form-item>
				<el-form-item label="纬度" prop="latitude">
					<el-input disabled v-model="editForm.latitude" size="medium" clearable></el-input>
				</el-form-item>
				<el-form-item label="最后修改人姓名">
					<el-input disabled v-model="editForm.lastUpdateName" size="medium" clearable></el-input>
				</el-form-item>
				<el-form-item label="最后修改时间">
					<el-input disabled v-model="editForm.lastUpdateTime" size="medium" clearable></el-input>
				</el-form-item>

				<el-form-item>
					<el-button type="primary" @click="onSubmit_edit('form_edit')">确认</el-button>
					<el-button @click="handleDialogClose">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
		<el-dialog title="厂站信息" :visible.sync="dialogVisible_edit_changzhan" :modal="false" width="500px" :before-close="handleDialogClose">
			<el-descriptions direction="vertical" border>
				<el-descriptions-item label="厂站编码">{{ editForm.code }}</el-descriptions-item>
				<el-descriptions-item label="厂站外部编码">{{ editForm.codeExtsys }}</el-descriptions-item>
				<el-descriptions-item label="厂站名称">{{ editForm.name }}</el-descriptions-item>
				<el-descriptions-item label="所属企业id">{{ editForm.entUuid }}</el-descriptions-item>
				<el-descriptions-item label="所属县级行政区划代码">{{ editForm.region }}</el-descriptions-item>
				<el-descriptions-item label="厂站类型">{{ editForm.type | setType(editForm) }}</el-descriptions-item>
				<el-descriptions-item label="厂站用途">{{ editForm.description }}</el-descriptions-item>
				<el-descriptions-item label="位置">{{ editForm.address }}</el-descriptions-item>
				<el-descriptions-item label="经度">{{ editForm.longitude }}</el-descriptions-item>
				<el-descriptions-item label="纬度">{{ editForm.latitude }}</el-descriptions-item>
				<el-descriptions-item label="启用时间">{{ editForm.startTime }}</el-descriptions-item>
				<el-descriptions-item label="负责人">{{ editForm.director }}</el-descriptions-item>
				<el-descriptions-item label="负责人联系方式">{{ editForm.directorPhone }}</el-descriptions-item>
				<el-descriptions-item label="气源种类">{{ editForm.gasType | setGasType }}</el-descriptions-item>
				<el-descriptions-item label="最大储气量">{{ editForm.storageCapacity }}</el-descriptions-item>
				<el-descriptions-item label="日最大供气量">{{ editForm.supplyCapacityDaily }}</el-descriptions-item>
				<el-descriptions-item label="是否为重大危险源">{{ editForm.isMhi | setIsMhi }}</el-descriptions-item>
				<el-descriptions-item label="储罐总容积">{{ editForm.storageVolume }}</el-descriptions-item>

				<el-descriptions-item label="最后修改人姓名">{{ editForm.lastUpdateName }}</el-descriptions-item>
				<el-descriptions-item label="最后修改时间" :span="2">{{ editForm.lastUpdateTime }}</el-descriptions-item>
				<el-descriptions-item label="备注" :span="3">{{ editForm.remark }}</el-descriptions-item>
			</el-descriptions>
		</el-dialog>
		<el-dialog title="附属设施信息" :visible.sync="dialogVisible_edit_sheshi" :modal="false" width="500px" :before-close="handleDialogClose">
			<el-descriptions direction="vertical" border>
				<el-descriptions-item label="设施编码">{{ editForm.code }}</el-descriptions-item>
				<el-descriptions-item label="企业设施编码">{{ editForm.codeExtsys }}</el-descriptions-item>
				<el-descriptions-item label="设施名称">{{ editForm.name }}</el-descriptions-item>
				<el-descriptions-item label="所属企业id">{{ editForm.entUuid }}</el-descriptions-item>
				<el-descriptions-item label="所属行政区划代码">{{ editForm.region }}</el-descriptions-item>
				<el-descriptions-item label="管道附属设施类型">{{ editForm.type | setType(editForm) }}</el-descriptions-item>
				<el-descriptions-item label="位置描述">{{ editForm.address }}</el-descriptions-item>
				<el-descriptions-item label="经度">{{ editForm.longitude }}</el-descriptions-item>
				<el-descriptions-item label="纬度">{{ editForm.latitude }}</el-descriptions-item>
				<el-descriptions-item label="启用时间">{{ editForm.startTime }}</el-descriptions-item>
				<el-descriptions-item label="设施用途">{{ editForm.description }}</el-descriptions-item>

				<el-descriptions-item label="最后修改人姓名">{{ editForm.lastUpdateName }}</el-descriptions-item>
				<el-descriptions-item label="最后修改时间">{{ editForm.lastUpdateTime }}</el-descriptions-item>
			</el-descriptions>
		</el-dialog>
	</div>
</template>

<script>
// import axios from '@/utils/request';
import ztitle from '@/components/ztitle';
import zmap from './map2';
import { getCityApi, getCountyApi,getEntInfoApi,getEntPipelinApi,getAllSectionApi,getUserInfoApi } from '@/api/piplineNodeInfo/index.js';
import { regionData, CodeToText, TextToCode } from "element-china-area-data";
import { Session } from '@/utils/storage';
const{APP_BASE_URL}= window;

export default {
	name: 'piplineNodeInfo',
	data() {
		return {
			isCity:true,
			areaData:[],
			zoneValue:[],  // 初始化默认值
			zoneOptions:[],
			zoneList:[],
			cityList:[],
			currentLineUuid:'',//
		currentRegionArr:[],
		currentRegion:'',
		companyList:[],
		currentCompanyUuid:'',
		currentLineRegion:'',
		ent:false,
		lineData:{name:'管线查看-信息编辑'},
			entValue:[],
			allBaseLine:[],
		defaultProps: {
                    children: 'children',
                    label: 'name'
                },
				cascProps:{
value:'region',
children: 'countyList',
                    label: 'name'
				},
			list: [],
			listQuery: {
				pageIndex: 1,
				pageSize: 10,
			},
			loading: true,
			total: 4,
			rowsData: [],
			offsetHeight: '',
			showTableBtn:false,
			dialogVisible_edit: false,
			dialogVisible_edit_changzhan: false,
			dialogVisible_edit_sheshi: false,
			editForm: {},

			rules: {
				plSectionCode: [
					{ required: true, message: '请输入所属分段编码', trigger: 'blur' },
					{ min: 17, max: 17, message: '编码长度为17位', trigger: 'blur' },
				],
				code: [
					{ required: true, message: '请输入节点编码', trigger: 'blur' },
					{ min: 20, max: 20, message: '编码长度为20位', trigger: 'blur' },
				],
				codeExtsys: [{ required: true, message: '请输入节点外部编码', trigger: 'blur' }],
				name: [{ required: true, message: '请输入节点名称', trigger: 'blur' }],
				type: [{ required: true, message: '请输入节点类型', trigger: 'change' }],
				address: [{ required: true, message: '请输入位置描述', trigger: 'blur' }],
				lastUpdateName: [{ required: true, message: '请输入最后修改人姓名', trigger: 'blur' }],
				lastUpdateTime: [{ required: true, message: '请输入最后修改时间', trigger: 'blur' }],
				longitude: [{ required: true, message: '请输入经度', trigger: 'blur' }],
				latitude: [{ required: true, message: '请输入纬度', trigger: 'blur' }],
			},
			pl_section_code: '',
			userName: '',
			mapView: { center: [114.487904, 38.047707], zoom: 14 },
			pl_base_data: {},
			pl_section_data: {},
			Pressure: null,
		};
	},


	watch: {
		'$store.state.piplineNodeInfo.pipLineNodeInfoList': {
			handler: function (val, oldVal) {
				this.list = val;
			},
			immediate: true,
			deep: true,
		},
	},
	filters: {
		setType(value, data) {
			let type = value;
			if (type == 170100) return '三通';
			if (type == 170200) return '拐点';
			if (type == 170300) return '末端';

			if (type == 180100) return '燃气储配站';
			if (type == 180200) return '门站';
			if (type == 180300) return '气化站';
			if (type == 180400) return '混气站';
			if (type == 180500) return '加气站';
			if (type == 180600) return '灌装站';
			if (type == 180700) return '供应站';
			if (type == 180800) return '调压站';
			if (type == 189900) return '其他';

			if (type == 190100) return '阀门井';
			if (type == 190200) return '调压装置';

			// if (!value) return '';
			// if (data.code.substr(0, 2) == '14') {
			// 	if (value == 100) {
			// 		return '三通';
			// 	} else if (value == 200) {
			// 		return '拐点';
			// 	} else if (value == 300) {
			// 		return '末端';
			// 	}
			// }
			// if (data.code.substr(0, 2) == '15') {
			// 	if (value == 100) {
			// 		return '阀门井';
			// 	} else if (value == 200) {
			// 		return '调压装置';
			// 	}
			// }
			// if (data.code.substr(0, 2) == '16') {
			// 	if (value == 100) {
			// 		return '燃气储配站';
			// 	} else if (value == 200) {
			// 		return '门站';
			// 	} else if (value == 300) {
			// 		return '气化站';
			// 	} else if (value == 400) {
			// 		return '混气站';
			// 	} else if (value == 500) {
			// 		return '加气站';
			// 	} else if (value == 600) {
			// 		return '灌装站';
			// 	} else if (value == 700) {
			// 		return '供应站';
			// 	} else if (value == 800) {
			// 		return '调压站';
			// 	} else if (value == 9900) {
			// 		return '其他';
			// 	}
			// }
		},
		setGasType(val) {
			let value = val + '';
			if (!value) return;
			switch (value) {
				case '030100':
					return 天然气;
				case '030101':
					return 管道天然气;
				case '030102':
					return 液化天然气;
				case '030103':
					return 压缩天然气;
				case '030200':
					return 液化石油气;
				case '030300':
					return 人工煤气;
				case '030400':
					return 液化石油气混空气;
				case '030500':
					return 沼气;
				case '030600':
					return 氢气;
			}
		},
		setIsMhi(value) {
			if (value == 1) return '是';
			if (value == 0) return '否';
		},
		setPressure(value) {
			if (value == 140100) return '超高压';
			if (value == 140200) return '高压';
			if (value == 140300) return '次高压';
			if (value == 140400) return '中压';
			if (value == 140500) return '低压';
		},
	},
	components: { zmap, ztitle },

	computed: {},

	mounted() {
		this.getUserInfo();
		// this.getHref();
		// this.getEntInfo();
		// this.getList();
		// this.getCity()
		// this.getEntPipelin();

		// window.addEventListener('beforeunload', (e) => this.beforeunloadHandler(e));
	},

	methods: {
		showTable(){
			this.showTableBtn=!this.showTableBtn
		},
		// async getCity() {
		// 	let res = await axios.get('/sysRegionCity/getCity');
		// 	let {code,result} = res.data;
		// },

      //选择下拉框
    //   getEntInfo(){
    //     axios.get("/entInfo/getEntInfo").then(res => {
    //       console.log(res)
    //     });
    //   },

		getUserInfo(){
		// 	let token = Session.get('token');
		// 	if (token == null || token.isEmpty()) {
		// 			return;
		// }
			getUserInfoApi().then((res)=>{
					// console.log(res,'rrrrrrrrrrr')
				if(res.data.userType==='E'){//如果是企业
					
					this.ent=false;//不显示选择框
					this.currentCompanyUuid=res.data.regionUuid;// 拿到企业uuid
					// 获取到企业的行政区划region
					this.currentLineRegion=res.data.bizCode;
					this.getList();
					this.getEntPipelin();// 拿到uuid下的管线信息
					
				}else if(String(res.data.bizRegionId).substr(0,1)==='1'){//如果是市政府
					this.ent=true;
					this.isCity=true;
					this.getList();
					this.getCity(res.data.bizRegionId);
				}else if(String(res.data.bizRegionId).substr(0,1)==='2'){//如果是县政府
				    this.ent=true;
					this.isCity=true;
					this.getCity(res.data.bizRegionId);
					this.getList();
				}

			})
		},
		
		
		beforeunloadHandler(e) {
			// debugger

			e = e || window.event;
			if (e) {
				e.returnValue = '关闭提示';
			}
			// debugger
			return '关闭提示';
		},
		async getList() {
			this.loading = false;
			setTimeout(() => {
				// this.offsetHeight = this.$refs.productTable.$el.clientHeight;
				// this.$refs.map.getMapRange();
			}, 1000);
			this.$refs.map.getMapRange();
		},
		handleChange(region) {//县
			// console.log(region,'rrrrrrr')
			this.currentRegion=region;
			this.currentCompanyUuid='';
			this.currentRegion=regionArr[1];
			
			this.currentLineRegion='';

			this.currentLineUuid='';
			// console.log(data,'dddddddddd')
			this.allBaseLine=[];
			this.lineData={};
			this.getEntInfo();
		},
		handleCityChange(regionArr) {//城市
			// console.log(regionArr,'rrrrrrr')
			this.currentCompanyUuid='';
			this.currentRegion=regionArr[1];
			
			this.currentLineRegion='';

			this.currentLineUuid='';
			// console.log(data,'dddddddddd')
			this.allBaseLine=[];
			this.lineData={};
			this.getEntInfo();
		},

		getCity(bizRegionId){
			
			getCityApi({bizRegionId:bizRegionId}).then((res)=>{
				this.areaData=res.data;
				let result=[]
				for (let i = 0; i < this.areaData.length; i++) {
      //获取到list的第i个对象，修改后返回一个新对象，不修改原对象。因为是一个树形结构，所以city的code和county的code不一样，必须把他们变成一样的。
      let res = JSON.parse(JSON.stringify(this.areaData[i]).replace(/cityCode/g, 'region').replace(/countyCode/g, "region"));
      //判断是否还有孩子，有就执行下面的操作
      if (this.areaData[i].countyList) {
        let childs = []//存孩子修改后的对象
        //遍历children下对象数组
        for (let j = 0; j < this.areaData[i].countyList.length; j++) {
          //获取到孩子的第j个对象，修改后返回一个新对象，不修改原对象
          let ch = JSON.parse(JSON.stringify(this.areaData[i].countyList[j]).replace(/cityCode/g, 'region').replace(/countyCode/g, "region"));
          childs.push(ch);
        }
        //将孩子修改后的属性赋值给res
        res.countyList = childs;
      }
      //将res装入result
      result.push(res)
    }
	this.areaData=result
	// console.log(this.areaData,'this.areaData')
			})
		},

		// getCounty(){
		// 	getCountyApi({region:"130200"}).then((res)=>{
		// 		this.cityList=res.data;
		
		// 	})
		// },

		getEntInfo(){
			getEntInfoApi({region:this.currentRegion}).then((res)=>{
				this.companyList=res.data;
			})
		},
		getEntPipelin(){
			// 正式情况下，换成下面的样子{entCode:this.currentCompanyUuid} 
			getEntPipelinApi({entUuid:this.currentCompanyUuid}).then((res)=>{
				res.data.forEach((v)=>{
					v.children=[];
				})
				this.allBaseLine=res.data;
				this.allBaseLine.forEach((v)=>{
					this.getAllSection(v.uuid);
				})
			// console.log(this.allBaseLine,'this.allBaseLine')

			})
			// getEntPipelinApi({entCode:this.currentCompanyUuid}).then((res)=>{
			// 	this.allBaseLine=res.data;
			// })//
		},
		getAllSection(baseLineUuid){
			getAllSectionApi({baseUuid:baseLineUuid}).then((res)=>{
			
				this.allBaseLine.forEach((v)=>{
				if(v.uuid===baseLineUuid){
					v.children=res.data;
				}
			})
			})
		},
		
		handleNodeClick(data){
			if(!data.children){
				// if(!data.plBaseUuid){
			// 	return;
			// }
			// console.log(data,'dddddddddddddddd')
			this.currentLineRegion=data.region;

			this.currentLineUuid=data.uuid;
			// console.log(data,'dddddddddd')
			this.getList();
			this.lineData=data;
			// console.log(this.currentLineRegion,'dddddddddd')
			}
			
		},
		
		nodeExpand(item){//点击该节点触发
			this.allBaseLine.forEach((v)=>{
				if(v.uuid===item.uuid){
					if(!v.children){
						this.getAllSection(item.uuid);

					}
				}
			})
		},

		handleZoneSelect(val) {
			this.zoneOptions = val;
		},

		handleEntSelect(uuid) {//用户点击城市触发事件
			// console.log(uuid,'item')
			this.currentCompanyUuid=uuid;//只需要当前公司id，不需要政府id
			this.getEntPipelin();
		},
		handleSizeChange(val) {
			this.listQuery.pageIndex = 1;
			this.listQuery.pageSize = val;
			this.getList();
		},
		handleCurrentChange(val) {
			this.listQuery.pageIndex = val;
			this.getList();
		},
		handleSelectionChange(val) {
			this.rowsData = val;
			if (val.length > 0) {
				this.single = false;
				this.multiple = false;
			} else {
				this.multiple = true;
				this.single = true;
			}
		},
		handleUpdate(row) {
			if (row.length > 1 || row.length == 0) return this.$message({ message: '请选择一条数据', type: 'warning' });
			this.editForm = { ...row[0] };
			if (this.getType(this.editForm.type) == '节点') this.dialogVisible_edit = true;
			if (this.getType(this.editForm.type) == '厂站') this.dialogVisible_edit_changzhan = true;
			if (this.getType(this.editForm.type) == '附属设施') this.dialogVisible_edit_sheshi = true;
		},

		/** 删除  */
		async handleDelete(data) {
			this.$confirm('此操作将永久删除该线段上点, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(async () => {})
				.catch(() => {});
		},
		handleDialogClose() {
			this.dialogVisible_edit = false;
			this.dialogVisible_edit_changzhan = false;
			this.dialogVisible_edit_sheshi = false;
		},
		onSubmit_edit(formName) {
			this.$refs[formName].validate(async (valid) => {
				if (valid) {
					let obj = { ...this.editForm };

					// obj.type = this.pad(obj.type, 4);

					await this.$store.dispatch('piplineNodeInfo/updateNode', { data: obj, uuid: obj.uuid });
					this.dialogVisible_edit = false;
					// this.getNodeInfoList();
					this.$refs.map.getNodeInfoList();
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		async handlePreservation() {
			// let arr = [];
			// this.list.map((e, index) => {
			// 	let obj = { plSectionCode: e.plSectionCode, code: e.code, key: index + 1 };
			// 	arr.push(obj);
			// });

			this.$refs.map.addLine(this.$store.state.piplineNodeInfo.pipLineNodeInfoList);
		},
		cancel() {
			this.$refs.map.delAppointPonint({ longitude: this.addForm.longitude, latitude: this.addForm.latitude });
			this.dialogVisible_edit = false;
		},
		openEdit(data, bool) {
			this.editForm = data;
			if (this.getType(this.editForm.type) == '节点') this.dialogVisible_edit = bool;
			if (this.getType(this.editForm.type) == '厂站') this.dialogVisible_edit_changzhan = bool;
			if (this.getType(this.editForm.type) == '附属设施') this.dialogVisible_edit_sheshi = bool;
		},
		async getMapCenterPoint() {
			const res = await this.$store.dispatch('piplineNodeInfo/getRegion', { uuid: this.pl_section_code, uname: this.userName });
			this.getPlSectionSection();
			if (!res.code || res.code != 200) return (this.mapView = { center: [114.487904, 38.047707], zoom: 14 });
			let address = res.data.split(';');
			const res2 = await this.$store.dispatch('piplineNodeInfo/getMapJson', { data: address[0], type: 0 });
			if (res2.data.status == '1') {
				let lonlat = res2.data.districts[0].center.split(',');

				this.mapView.center = [lonlat[0] * 1, lonlat[1] * 1];
				this.mapView.zoom = 14;
			}
		},
		//获取中心坐标
		getCentralData(oneLon, oneLat, twoLon, twoLat) {
			//oneLon：第一个点的经度；oneLat：第一个点的纬度；twoLon：第二个点的经度；twoLat：第二个点的纬度；
			let aLon = 0,
				aLat = 0;
			let bLon = Number(oneLon) - Number(twoLon);
			let bLat = Number(oneLat) - Number(twoLat);
			//Math.abs()绝对值
			if (bLon > 0) {
				aLon = Number(oneLon) - Math.abs(bLon) / 2;
			} else {
				aLon = Number(twoLon) - Math.abs(bLon) / 2;
			}
			if (bLat > 0) {
				aLat = Number(oneLat) - Math.abs(bLat) / 2;
			} else {
				aLat = Number(twoLat) - Math.abs(bLat) / 2;
			}
			return [aLon, aLat];
		},
		getType(number) {
			let stringNumber = number + '';
			let num = stringNumber.substr(0, 2);
			if (num == '17') return '节点';
			if (num == '18') return '厂站';
			if (num == '19') return '附属设施';
		},
		async searchAddress(data) {
			if (!data.data) return this.getMapCenterPoint();
			const res2 = await this.$store.dispatch('piplineNodeInfo/getMapJson', data);
			if (res2.data.status == '1') {
				let lonlat = res2.data.districts[0].center.split(',');
				this.mapView.center = [lonlat[0] * 1, lonlat[1] * 1];
			} else {
				this.$message.error(res2.info || '查询失败');
			}
		},
		getHref() {
			// window.location.href = window.location.href + '?code=12312313&lastUpdateName=zhao';
			// this.$router.push({
			// 	// path: window.location.href,
			// 	query: {
			// 		uuid: '22318612663a980aa849',
			// 		uname: 'zao',
			// 	},
			// });

			var url = window.location.href;
			// var  dz_url = url.split()
			var cs = url.split('?')[1]; //获取?之后的参数字符串

			if (!cs) return this.$message.error('请传入指定参数');
			var cs_arr = cs.split('&');

			cs_arr.forEach((e) => {
				var data = e.split('=');
				if (data[0] == 'uuid') this.pl_section_code = data[1];
				if (data[0] == 'uname') this.userName = data[1];
			});

			this.getMapCenterPoint();
		},
		//获取管道参数
		async getPlSectionSection() {
			const res = await this.$store.dispatch('piplineNodeInfo/getPlSectionSection');
			console.log('🚀 ~ file: piplineNodeInfo.vue ~ line 522 ~ getPlSectionSection ~ res', res);
			if (res.code == '200') {
				this.pl_base_data = { ...res.data[1] };
				this.pl_section_data = { ...res.data[0] };
				this.Pressure = this.pl_base_data.pressure;
			}
		},

		// 这段代码定义了一个异步函数getPlSectionSection()。函数使用了await等待this.$store.dispatch('piplineNodeInfo/getPlSectionSection')函数的返回结果。打印返回结果res，根据res.code是否等于'200'，分别将res.data[1]和res.data[0]赋值给this.pl_base_data和this.pl_section_data。最后，将this.pl_base_data.pressure赋值给this.Pressure。
	},
	beforeDestroy() {},
};

</script>
<style lang='scss' scoped>



.piplineNodeInfo {
	padding: 10px;
	background: white;
}

.menu {
}

.information {
	// display: none;
	position: absolute;
	top: 50px;
	right: 70px;
	z-index: 1000;
	bottom: 50px;
	overflow: hidden;
	max-height: 1000px;
}

.el-table {
	min-height: calc(100vh - 130px);
}

.ditu {
	position: relative;
}

::v-deep .el-dialog__body {
	&::-webkit-scrollbar {
		width: 0 !important;
	}
}
.title {
	padding-right: 15px;
	color: #79bbff;
	span {
		color: #409eff;
		// font-weight: 600;
		// font-size: 17px;
	}
}
</style>
